import {Upload, Button as AntdButton} from 'antd';
import {UploadOutlined} from '@ant-design/icons';
import React from "react";
import {NamePath} from "rc-field-form/lib/interface";
import {renderIcon, VJsonComponent, VJsonComponentBase} from "../../factory";
import _ from "lodash";
import * as Extend from "../../extend";
import {apply, isPromise, YvanEventDispatch} from "../..";
import {toJS} from "mobx";

export interface UploaderVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

}

export interface UploaderState {
    formItemName: NamePath,
}

@VJsonComponent({
    view: 'uploader'
})
export default class Uploader extends VJsonComponentBase<UploaderVJsonProp, UploaderState> {
    static defaultProps = {
        loading: false,
        visible: true,
        fileList: [],
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            this.props.vjson,
            Uploader.defaultProps
        )
        // this.state = {
        //     fileList: _.isArray(this.props.vjson.file)?this.props.vjson.file:[this.props.vjson.file]
        //     formItemName:
        // }
        // this.setState({})
    }


    get loading() {
        return this.props.vjson.loading
    }

    set loading(v) {
        this.props.vjson.loading = v
    }

    onChangeBind(info: any) {
        const res = YvanEventDispatch(this.props.vjson.onChange, this, info)
        if (isPromise(res)) {
            this.loading = true
            res.finally(() => {
                this.loading = false
            })
        }
        // if (info.file.status !== 'uploading') {
        //     console.log(info.file, info.fileList);
        // }
        if (info.file.status === 'done') {
            const res1 = YvanEventDispatch(this.props.vjson.onFileUpload, this, info)
            if (isPromise(res1)) {
                this.loading = true
                res1.finally(() => {
                    this.loading = false
                })
            }
        } else if (info.file.status === 'error') {
            const res1 = YvanEventDispatch(this.props.vjson.onFileUploadError, this, info)
            if (isPromise(res1)) {
                this.loading = true
                res1.finally(() => {
                    this.loading = false
                })
            }
        }
    }

    onPreviewBind(info: any) {
        const res = YvanEventDispatch(this.props.vjson.onPreview, this, info)
        if (isPromise(res)) {
            this.loading = true
            res.finally(() => {
                this.loading = false
            })
        }
    }

    render() {
        if (Extend.isDebugMode()) {
            console.log('RenderUpload', this.toString())
        }

        if (!this.props.vjson.visible) {
            return null
        }

        const props = {
            onChange: this.onChangeBind.bind(this),
            action: apply(this, this.props.vjson.url),
            onPreview: this.onPreviewBind.bind(this),
            name: this.props.vjson.name,
            progress: {
                strokeColor: {
                    '0%': '#108ee9',
                    '100%': '#87d068',
                },
                strokeWidth: 3,
                format: (percent: any) => `${parseFloat(percent.toFixed(2))}%`,
            },
        }

        return (
            // @ts-ignore
            <Upload {...props}
                    fileList={this.props.vjson.fileList}
                    disabled={this.props.vjson.disabled}
                    showUploadList={this.props.vjson.showUploadList}>
                <AntdButton icon={<UploadOutlined/>}
                            style={apply(this, toJS(this.props.vjson.style))}
                            type={this.props.vjson.buttonType}>{this.props.vjson.text}</AntdButton>
            </Upload>
        )
    }
}